import React from 'react';
import {
    BasicLayoutProps as ProLayoutProps,
} from '@ant-design/pro-layout';
import { useModel, connect, Dispatch, history } from 'umi';
import { Modal, Tabs } from 'antd';
import $utils from '@/utils/utils';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export type SiderTheme = 'light' | 'dark';

export interface BasicLayoutProps extends ProLayoutProps {
    dispatch: Dispatch;
    tabList: any;
    curTab: any;
}

const { TabPane } = Tabs;

const GlobalHeaderRight: React.FC<BasicLayoutProps> = ({ dispatch, tabList, curTab }) => {

    const { initialState } = useModel('@@initialState');

    if (!initialState || !initialState.settings) {
        return null;
    }

    const { navTheme, layout } = initialState.settings;
    let className = styles.right;

    if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
        className = `${styles.right}  ${styles.dark}`;
    }

    return (
        <div className={`${className} ${styles['zkfc-header']}`}>
            <div className={styles.tabList}>
                <Tabs style={{ maxWidth: '100%' }} type="editable-card" hideAdd={true} tabBarGutter={0} activeKey={curTab?.name} onTabClick={(activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => {
                    const tab = tabList.find((tab: any) => tab.name === activeKey);

                    if (curTab && ['create', 'update'].includes(curTab.state?.status)) {
                        Modal.confirm({
                            title: '警告！',
                            icon: <ExclamationCircleOutlined />,
                            content: '您可能有修改尚未保存，确定要跳转新页面吗？',
                            okText: '确认',
                            cancelText: '取消',
                            onOk: () => {
                                // 设置当前tab对象
                                $utils.setNewTab(dispatch, tab);
                                $utils.addTab(dispatch, tab);
                            },
                        });
                    } else {
                        // 设置当前tab对象
                        if (curTab?.path === tab.path) {
                            $utils.setNewTab(dispatch, tab);
                            history.replace({
                                pathname: tab.path,
                                state: tab?.state,
                            });
                        }
                        else {
                            $utils.setNewTab(dispatch, tab);
                            history.push({
                                pathname: tab.path,
                                state: tab?.state,
                            });
                        }
                    }
                }} onEdit={(e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
                    if (action === 'remove') {
                        const index = tabList.findIndex((tab: any) => tab.name === e), cur_tab = tabList[index];
                        tabList.splice(index, 1);

                        if (curTab?.name === cur_tab.name) {
                            let newTab = null;
                            if (tabList[index]) {
                                if (tabList[index - 1]) {
                                    history.push({
                                        pathname: tabList[index - 1].path,
                                        state: tabList[index - 1]?.state,
                                    });
                                    newTab = tabList[index - 1];

                                } else {
                                    history.push({
                                        pathname: tabList[index].path,
                                        state: tabList[index]?.state
                                    });
                                    newTab = tabList[index];
                                }
                            }
                            else {
                                history.push({
                                    pathname: tabList[tabList.length - 1].path,
                                    state: tabList[tabList.length - 1]?.state,
                                });
                                newTab = tabList[tabList.length - 1];
                            }
                            // 设置当前tab对象（关闭当前页面的时候才去设置）
                            $utils.setNewTab(dispatch, newTab);
                        }
                        else {
                            history.replace({
                                pathname: curTab.path,
                                state: curTab?.state
                            });
                        }
                        dispatch({ type: 'common/resetTab', payload: { tabList } });
                    }
                }}>
                    {tabList?.map((tab: any,) => (
                        <TabPane tab={tab.name} data-name={tab.name} key={tab.name} closable={!(tabList.length === 1 && window.location.pathname === tab.path)}>
                        </TabPane>
                    ))}
                </Tabs>

            </div>
            <div className={styles.avatar}>
                <Avatar />
            </div>
        </div>
    );
};

export default connect(({ common, }: any) => ({
    tabList: common.tabList,
    curTab: common.curTab
}))(GlobalHeaderRight);
